<template>
  <div id="summernote" v-model="richContent"></div>
</template>

<script>
import { uploadImg } from '@/api';

export default {
  name:'',
  components:{},
  props:[],
  data(){
    return {
        isHas:false,
        richContent:''
    }
  },
  computed:{},
  created(){},
  mounted(){
    let _this=this;
    !this.isHas&&$('#summernote').summernote({
      lang: 'ko-KR',
      placeholder: '',
      height: 400,
      htmlMode: true,
      toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['fontsize', ['fontsize']],
        ['fontname', ['fontname']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['insert', ['link', 'picture', 'video']],
        ['table', ['table']],
        ['height', ['height']],
        ['view', ['codeview']],
      ],
      fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],
      fontNames: [
        'Noto Sans KR','Nanum Gothic',"Nanum Myeongjo","Helvetica", "Arial","Helvetica Neue",'sans-serif'
      ],
      fontNamesIgnoreCheck: ['Noto Sans KR','Nanum Gothic',"Nanum Myeongjo"],
      callbacks: {
        onInit: function() {
            _this.isHas=true;
            _this.richContent&&$('#summernote').summernote('code',_this.richContent);
            $('#summernote').summernote('fontName', 'Noto Sans KR')
        },
        onBlur: function() {
          _this.$emit("checkCon"); 
        },
        onImageUpload: function(files) {
            if(files && files[0]) {
                let size = Math.floor(files[0].size / 1024);
                if (size > 3*1024) {
                    _this.$alert('3MB이하의 이미지를 첨부해주세요.', '알림', {
                        confirmButtonText: '확인'
                    });
                    return false
                }
                _this.uploadImg(files[0]);
            }
        }
      }
    })    
  },
  methods:{
    async uploadImg(file){
        try {
            let res = await uploadImg({image:file});
            if (res.code == 200) {
                $('#summernote').summernote('insertImage', res.data.url)            
            }else{
                this.$alert('이미지 첨부 실패하였습니다.', '알림', {
                    confirmButtonText: '확인'
                });
            }
        } catch (error) {
            this.$alert('이미지 첨부 실패하였습니다.', '알림', {
                confirmButtonText: '확인'
            });
        }
    }
  },
  watch:{},
  destroyed(){
      $('#summernote').summernote('destroy');
  }
}
</script>
<style lang="scss" scoped>
</style>